
<template>
  <div class="home">
    <div class="row-1">
      <div class="panel">
        <div class="box-1" v-for="(item, index) in row1" :key="index">
          <div>
            <div class="left">
              <span class="iconfont" :class="item.icon"></span>
            </div>
            <div class="right">
              <span class="label">{{ item.label }}</span>
              <span class="value">{{ format_number(allData[item.prop]) }}<span class="unit">{{ item.unit }}</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row-2">
      <div class="panel inspection-agency">
        <div class="sub-title">用户群体分析</div>
        <div class="content">
          <div class="box">
            <div>
              <div class="left">
                <span class="iconfont icon-inspection"></span>
              </div>
              <div class="right">
                <span class="value">{{ format_number(allData.employeeNumber) }}</span>
                <span class="label">员工数量</span>
              </div>
            </div>
          </div>
          <div class="box">
            <div>
              <div class="left">
                <span class="iconfont icon-inspector"></span>
              </div>
              <div class="right">
                <span class="value">{{ format_number(allData.memberNumber) }}</span>
                <span class="label">会员数量</span>
              </div>
            </div>
          </div>
          <div class="box">
            <div>
              <div class="left">
                <span class="iconfont icon-clock"></span>
              </div>
              <div class="right">
                <span class="value">{{ format_number(allData.notUseMember) }}<span class="unit">人</span></span>
                <span class="label">禁用的用户数量</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel inspection-report">
        <div class="sub-title">预约服务分析</div>
        <div class="content">
          <div class="chart" id="chart3"></div>
          <div class="chart" id="chart4"></div>
          <div class="chart" id="chart5"></div>
        </div>
      </div>
    </div>

    <div class="row-4">
      <div class="panel">
        <div class="sub-title">
          <span class="text">预约服务正在审批中...</span>
          <!-- <span class="more-btn" @click="goToTaskList">更多</span> -->
        </div>
        <div class="content">
          <el-table
              :data="subApprovingList"
              height="250"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="预约ID"
                width="180">
              </el-table-column>
              <el-table-column
                prop="subscribeStartTime"
                label="预约开始时间"
                width="180">
              </el-table-column>
              <el-table-column
                prop="subscribeEndTime"
                label="预约结束时间">
              </el-table-column>
              <el-table-column
                prop="realName"
                label="预约者">
              </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="panel">
        <div class="sub-title">
          <span class="text">订单正在配送中...</span>
          <!-- <span class="more-btn" @click="goToInspectionReportList">更多</span> -->
        </div>
        <div class="content">
          <el-table
              :data="shopOrderSendingList"
              height="250"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="订单号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="money"
                label="费用"
                width="180">
              </el-table-column>
              <el-table-column
                prop="realName"
                label="下单用户">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="下单时间">
              </el-table-column>
          </el-table>
        </div>
      </div>
    </div>


  </div>
</template>


<script>
import 'echarts/extension/bmap/bmap'
import { format_number,format_tableData_null } from '@/utils/formatter'

import { commonStatApi,listOrderSendingLists,listSubApprovingLists } from '@/api/modules/home'


export default {
  name: 'Home',
  data () {
    return {
      row1: [
        { label: '已上架商品数量', prop: 'goodsUsingNumber', unit: '个', icon: 'icon-task' },
        { label: '预约服务数量', prop: 'subscribeNumber', unit: '次', icon: 'icon-inspection-2' },
        { label: '预约订单数量', prop: 'subscribeOrderNumber', unit: '个', icon: 'icon-inspection-2' },
        { label: '商品已完成订单数量', prop: 'shopOrderFinishedNumber', unit: '个', icon: 'icon-station' },
        { label: '商品评论数量', prop: 'shopCommentNumber', unit: '条', icon: 'icon-station' },
      ],
      allData: {
        goodsUsingNumber: 0,                     // 已上架商品数量
        subscribeNumber: 0,                      // 预约服务数量
        subscribeOrderNumber: 0,             // 预约订单数量
        shopOrderFinishedNumber: 0,               // 商品订单数量
        shopCommentNumber:0,            // 商品评论数量

        employeeNumber: 0,                // 员工数量
        memberNumber: 0,                // 会员数量
        notUseMember: 0,             // 禁用会员数量
        
        subscribePassNums: 0,            // 预约服务通过数量
        subscribeRejectNums: 0,          // 预约服务驳回数量
        subscribeSubmitNums: 0,         // 预约服务其他状态数量数量

        inspectionQualifiedNums: 0,             // 检定合格数
        inspectionEquipmentNums: 0,             // 检定设备数量
        inspectionPileNums: 0,                  // 充电桩检定数量

      },
      chart3: null,             /* 检定报告分析 - 提交 - gauge */
      chart4: null,             /* 检定报告分析 - 审批通过 - gauge */
      chart5: null,             /* 检定报告分析 - 驳回报告 - gauge */
      chart7: null,             /* 检定总合格率 - 线性图（检定次数、检定合格数、合格率） */
      chart8: null,             /* 运营商检定合格TOP10 - 柱状图 */
      chart9: null,             /* 行政区域检定合格 - 柱状图  */
      map: null,
      mapRatio: null,

      chart1_option: null,
      chart2_option: null,
      chart3_option: null,
      chart4_option: null,
      chart5_option: null,
      chart7_option: null,
      chart8_option: null,
      chart9_option: null,


      operatorPassRatioTopListDialog: false,
      areaPassRatioTopListDialog: false,
      shopOrderSendingList: [],
      subApprovingList: []
    }
  },
  methods: {
    format_number,
    initAllCharts () {

      this.chart3 = this.$echarts.init(document.querySelector('#chart3'))
      this.chart4 = this.$echarts.init(document.querySelector('#chart4'))
      this.chart5 = this.$echarts.init(document.querySelector('#chart5'))
      // this.chart7 = this.$echarts.init(document.querySelector('#chart7'))
      // this.chart8 = this.$echarts.init(document.querySelector('#chart8'))
      // this.chart9 = this.$echarts.init(document.querySelector('#chart9'))

      /* 检定报告分析（提交、审批通过、驳回报告） */
      this.chart3_option = getGaugeOption({
        series: {
          data: [{ name: '提交' }],
          progress: {
            itemStyle: {
              color: '#3ba1ff'
            }
          }
        } 
      })
      this.chart4_option = getGaugeOption({
        series: {
          data: [{ name: '审批通过' }],
          progress: {
            itemStyle: {
              color: '#68d289'
            }
          }
        } 
      })
      this.chart5_option = getGaugeOption({
        series: {
          data: [{ name: '驳回报告' }],
          progress: {
            itemStyle: {
              color: '#fad955'
            }
          }
        } 
      })

      /* 检定历史记录（线性图） */
      this.chart7_option = {
        dataset: {
          source: [[], [], [], []]
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: [
          {
            type: 'value',
            splitNumber: 3,
          },
          {
            type: 'value',
            splitNumber: 2,
            axisLabel: {
              formatter: (value) => {
                return parseFloat((value * 100).toFixed(2)) + '%'
              }
            }
          }
        ],
        series: [
          {
            name: '检定次数',
            type: 'line',
            yAxisIndex: 0,
            seriesLayoutBy: 'row'
          },
          {
            name: '检定合格数',
            type: 'line',
            yAxisIndex: 0,
            seriesLayoutBy: 'row'
          },
          {
            name: '合格率',
            type: 'line',
            yAxisIndex: 1,
            seriesLayoutBy: 'row'
          }
        ]
      }

      /* TOP10 */
      this.chart8_option = getBarOption({
        xAxis: {
          axisLabel: {
            rotate: -22.5,
            margin: 30,
          }
        }
      })
      this.chart9_option = getBarOption({
        
        dataset: {
          dimensions: ['district', 'count'],
          source: [
            { district: '罗湖区', count: 0 },
            { district: '福田区', count: 0 },
            { district: '南山区', count: 0 },
            { district: '盐田区', count: 0 },
            { district: '龙岗区', count: 0 },
            { district: '宝安区', count: 0 },
            { district: '龙华区', count: 0 },
            { district: '坪山区', count: 0 },
            { district: '光明区', count: 0 },
          ]
        }
      })

      this.chart1.setOption(this.chart1_option)
      this.chart2.setOption(this.chart2_option)
      this.chart3.setOption(this.chart3_option)
      this.chart4.setOption(this.chart4_option)
      this.chart5.setOption(this.chart5_option)
      this.chart7.setOption(this.chart7_option)
      this.chart8.setOption(this.chart8_option)
      this.chart9.setOption(this.chart9_option)

      setTimeout(() => {
        this.allChartsResize()
      }, 100)


      function getLiquidFillOption(opt) {
        return{
          title: [
            {
              text: opt?.title[0]?.text || '- -',
              bottom: 0,
              left: 'center',
              textStyle: {
                color: 'rgba(0, 0, 0, .8)',
                fontSize: 12,
                fontWeight: 400
              }
            },
            {
              text: '0%',
              top: '35%',
              left: 'center',
              textStyle: {
                color: '#000',
                fontSize: 14,
                fontWeight: 600
              }
            },
            {
              text: opt?.title[1]?.text || '- -',
              top: '55%',
              left: 'center',
              textStyle: {
                color: '#000',
                fontSize: 10,
                fontWeight: 500
              }
            },
            {
              text: opt?.title[2]?.text || '- -',
              top: '65%',
              left: 'center',
              textStyle: {
                color: '#000',
                fontSize: 10,
                fontWeight: 500
              }
            }
          ],
          series: {
            type: 'liquidFill',
            color: [opt?.series?.color || '#68d289'],
            center: ['50%', '45%'],
            radius: '70%',
            label: {
              show: false
            },
            outline: {
              show: true,
              borderDistance: 2,
              itemStyle: {
                  color: 'none',
                  borderColor: opt?.series?.color || '#68d289',
                  borderWidth: 4,
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            },
            backgroundStyle: {
              color: '#FFF'
            },
            itemStyle: {
              shadowColor: '#FFF'
            },
            data: [0]
          }
        }
      }
      function getGaugeOption(opt) {
        return {
          series: {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            center: ['50%', '50%'],
            radius: '90%',
            
            pointer: { show: false },
            progress: {
              show: true,
              itemStyle: {
                color: opt?.series?.progress?.itemStyle?.color || 'auto'
              }
            },
            axisLine: {
              lineStyle: {
                width: 10,
              }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            data: [
              {
                value: 0,
                name: opt?.series?.data[0].name,
              }
            ],
            title: {
              fontSize: 14,
                offsetCenter: ['0%', '-20%']
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: '#000',
              borderColor: 'none',
              borderRadius: 20,
              borderWidth: 1,
              
              valueAnimation: true,
              // offsetCenter: ['0%', '-20%'],
              formatter: '{value}%',
            }
          }
        }
      }
      function getBarOption(opt) {
        return {
          dataset: {
            dimensions: opt?.dataset?.dimensions || [],
            source: opt?.dataset?.source || []
          },
          grid: {
            top: '15%',
            right: '10%',
            left: '10%',
            bottom: '20%',
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              align: 'center',
              interval: 0,
              margin: opt?.xAxis?.axisLabel?.margin || 8,
              rotate: opt?.xAxis?.axisLabel?.rotate || 0,
              formatter: (label) => {
                if((label ?? '') !== '') {
                  if(label.length > 5) {
                    return label.slice(0, 5) + '...'
                  } else {
                    return label.slice(0, 5)
                  }
                } else {
                  return '-'
                }
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: label => {
                return label * 100 + '%'
              }
            }
          },
          series: {
            name: '合格率',
            type: 'bar',
            color: '#6193f9',
            barMaxWidth: 20,
            label: {
              show: true,
              position: 'top',
              formatter: params => {
                const { data: { inspectionQualifiedRate } } = params
                return parseFloat((inspectionQualifiedRate * 100).toFixed(2)) + '%'
              }
            }
          }
        }
      }
    },
    initMap() {
      
      this.map = this.$echarts.init(document.querySelector('#map'))
      this.mapRatio = this.$echarts.init(document.querySelector('#map-ratio'))
      this.map_option = {
        tooltip: {
          formatter: (p) => {
            const { seriesName, marker, name, value: [_,__,passingRate] } = p
            return `
              <b>${name}</b><br/>
              ${marker} ${seriesName}: <b>${parseFloat((passingRate * 100).toFixed(2))}%</b>
            `
          }
        },
        bmap: {
          center: [114.076338,22.58183],
          zoom: 12,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: 'water',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'land',
                elementType: 'all',
                stylers: {
                  color: '#f3f3f3'
                }
              },
              {
                featureType: 'railway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'highway',
                elementType: 'all',
                stylers: {
                  color: '#fdfdfd'
                }
              },
              {
                featureType: 'highway',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'poi',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'green',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'subway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'manmade',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'local',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'boundary',
                elementType: 'all',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'building',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              }
            ]
          }
        },
        series: []
      }
      this.mapRatio_option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 0
            }
          }
        },
        legend: {
          bottom: '25%'
        },
        grid: {
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          max: (value) => {
            return value.max;
          },
          splitLine: { show:false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          type: 'category',
          data: ['充电站合格率'],
          splitLine: { show:false },
          axisLine: { show: false },
          axisTick: { show: false }
        },
        series: [
          {
            name: '大于95%',
            type: 'bar',
            barWidth: 15,
            color: '#0050b3',
            stack: 'total',
            data: [0]
          },
          {
            name: '85%~95%',
            type: 'bar',
            barWidth: 15,
            color: '#1790ff',
            stack: 'total',
            data: [0]
          },
          {
            name: '80%~85%',
            type: 'bar',
            barWidth: 15,
            color: '#69c0ff',
            stack: 'total',
            data: [0]
          },
          {
            name: '小于80%',
            type: 'bar',
            barWidth: 15,
            color: '#bae7ff',
            stack: 'total',
            data: [0]
          },
          {
            name: '未检定站点',
            type: 'bar',
            barWidth: 15,
            color: '#d1d1d1',
            stack: 'total',
            data: [0]
          }
        ]
      }

      this.map.setOption(this.map_option)
      this.mapRatio.setOption(this.mapRatio_option)

      this.setMapData()

      /* 监听图例 */
      this.mapRatio.on('legendselectchanged', (obj) => {
        const { selected } = obj

        this.map_option.series[0].data = selected['大于95%'] ? this.dataList_passingRate95 : []
        this.map_option.series[1].data = selected['85%~95%'] ? this.dataList_passingRate85 : []
        this.map_option.series[2].data = selected['80%~85%'] ? this.dataList_passingRate80 : []
        this.map_option.series[3].data = selected['小于80%'] ? this.dataList_passingRate0 : []
        this.map_option.series[4].data = selected['未检定站点'] ? this.dataList_passingRateOther : []

        console.log(this.map_option)
        this.map.setOption(this.map_option)
      })
    },
    async setMapData() {
      try {
        const { data } = await mapDataApi()
        
        // 格式化数据
        const transformMapData = data.inspectionStations.map(item => {
          const { stationName, lng, lat, passingRate } = item
          return {
            name: stationName,
            value: [ lng, lat, passingRate ]
          }
        })
        
        this.dataList_passingRate95 = []
        this.dataList_passingRate85 = []
        this.dataList_passingRate80 = []
        this.dataList_passingRate0 = []
        this.dataList_passingRateOther = []

        transformMapData.forEach(item => {
          const { value: [_,__,passingRate] } = item
          if(passingRate > 0.95) {
            this.dataList_passingRate95.push(item)
          } else if (passingRate > 0.85 && passingRate <= 0.95) {
            this.dataList_passingRate85.push(item)
          } else if (passingRate > 0.80 && passingRate <= 0.85) {
            this.dataList_passingRate80.push(item)
          } else if (passingRate > 0 && passingRate <= 0.80) {
            this.dataList_passingRate0.push(item)
          } else {
            this.dataList_passingRateOther.push(item)
          }
        })

        const scatterSeries_passingRate95 = getScatterOpt({ color: '#0050b3', symbolSize: 40, data: this.dataList_passingRate95 })
        const scatterSeries_passingRate85 = getScatterOpt({ color: '#1790ff', symbolSize: 30, data: this.dataList_passingRate85 })
        const scatterSeries_passingRate80 = getScatterOpt({ color: '#69c0ff', symbolSize: 20, data: this.dataList_passingRate80 })
        const scatterSeries_passingRate0 = getScatterOpt({ color: '#bae7ff', symbolSize: 15, data: this.dataList_passingRate0 })
        const scatterSeries_passingRateOther = getScatterOpt({ color: '#d1d1d1', symbolSize: 15, data: this.dataList_passingRateOther })

        this.map_option.series.splice(0, this.map_option.series.length)
        this.map_option.series.push(scatterSeries_passingRate95)
        this.map_option.series.push(scatterSeries_passingRate85)
        this.map_option.series.push(scatterSeries_passingRate80)
        this.map_option.series.push(scatterSeries_passingRate0)
        this.map_option.series.push(scatterSeries_passingRateOther)
        this.map.setOption(this.map_option)

        const {
          passingRate95,
          passingRate85,
          passingRate80,
          passingRate0,
          passingRateOther
        } = data
        this.mapRatio_option.series[0].data = [passingRate95]
        this.mapRatio_option.series[1].data = [passingRate85]
        this.mapRatio_option.series[2].data = [passingRate80]
        this.mapRatio_option.series[3].data = [passingRate0]
        this.mapRatio_option.series[4].data = [passingRateOther]

        this.mapRatio.setOption(this.mapRatio_option)
      } catch (err) {
        console.error(err)
      }

      function getScatterOpt({ color, symbolSize, data }) {
        return {
          name: '充电站合格率',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data,
          symbolSize,
          showEffectOn: 'emphasis',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          itemStyle: {
            color: color,
            opacity: .6,
            borderColor: color,
            borderWidth: 2
          },
          zlevel: 1
        }
      }
    },
    allChartsResize() {
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
      this.chart4.resize()
      this.chart5.resize()
      this.chart7.resize()
      this.chart8.resize()
      this.chart9.resize()
      this.map.resize()
      this.mapRatio.resize()
    },

    /* 基本信息统计 */
    async commonStat() {
      try {
        const { data } = await commonStatApi()
        this.allData = {
          ...this.allData,
          ...data
        }
        
        const {
          goodsUsingNumber,                     // 已上架商品数量
          subscribeNumber,                      // 预约服务数量
          subscribeOrderNumber,             // 预约订单数量
          shopOrderFinishedNumber,               // 商品订单数量
          shopCommentNumber,            // 商品评论数量

          employeeNumber,                // 员工数量
          memberNumber,                // 会员数量
          notUseMember,             // 禁用会员数量
          
          subscribePassNums,            // 预约服务通过数量
          subscribeRejectNums,          // 预约服务驳回数量
          subscribeSubmitNums,         // 预约服务其他状态数量数量

        } = this.allData

        if((subscribeNumber ?? '') !== '' && subscribeNumber > 0) {
          /* 检定报告分析 - 提交 */
          this.chart3_option.series.data[0].value = ((subscribeSubmitNums / subscribeNumber) * 100).toFixed(2)
          this.chart3.setOption(this.chart3_option)
          this.chart4_option.series.data[0].value = ((subscribePassNums / subscribeNumber) * 100).toFixed(2)
          this.chart4.setOption(this.chart4_option)
          this.chart5_option.series.data[0].value = ((subscribeRejectNums / subscribeNumber) * 100).toFixed(2)
          this.chart5.setOption(this.chart5_option)
        }
        
        /* 检定总合格率 */
        if((inspectionNums ?? '') !== '' && inspectionNums > 0) {
          this.chart1_option.title[1].text = ((inspectionQualifiedNums / inspectionNums) * 100).toFixed(2) + '%'
          this.chart1_option.title[2].text = `合格数：${ inspectionQualifiedNums }`
          this.chart1_option.title[3].text = `检定总数：${ inspectionNums }`
          this.chart1_option.series.data = [inspectionQualifiedNums / inspectionNums]
          this.chart1.setOption(this.chart1_option)
        }

        /* 检定桩覆盖率 */
        if((pileSums ?? '') !== '' && pileSums > 0) {
          this.chart2_option.title[1].text = ((inspectionPileNums / pileSums) * 100).toFixed(2) + '%'
          this.chart2_option.title[2].text = `检定桩数：${ inspectionPileNums }`
          this.chart2_option.title[3].text = `总桩数：${ pileSums }`
          this.chart2_option.series.data = [inspectionPileNums / pileSums]
          this.chart2.setOption(this.chart2_option)
        }


      } catch (err) {
        console.error(err)
      }
    },
    /* 按月统计 - 线性图（检定次数、检定合格数、合格率） */
    async historyMonth() {
      try {
        const { data } = await historyMonthApi()
        
        this.chart7_option.dataset = {
          dimensions: ['month', 'inspectionNums', 'inspectionQualifiedNums', 'inspectionQualifiedRate'],
          source: data.map(item => {
            const { inspectionQualifiedRate } = item
            return {
              ...item,
              inspectionQualifiedRate: inspectionQualifiedRate == null ? 0 : inspectionQualifiedRate
            }
          })
        }

        this.chart7_option.tooltip['formatter'] = series => {
          let result = series[0].axisValueLabel + '<br />'
          series.forEach(item => {
            const { marker, seriesName, data, seriesIndex, dimensionNames  } = item
            let unit = ''
            let value = data[dimensionNames[seriesIndex + 1]]
            if(seriesName == '合格率') {
              unit = '%'
              value = parseFloat((value * 100).toFixed(2))
            }
            result += `${ marker } ${ seriesName }：<b>${ value }${ unit }</b> <br />`
          })
          return result
        }
        
        this.chart7.setOption(this.chart7_option)
      } catch (err) {
        console.error(err)
      }
    },

    
    async getShopOrderSending () {
      try {
        const res = await listOrderSendingLists()
        // const { list } = res.data
        this.shopOrderSendingList = res.data
        console.log(this.shopOrderSendingList)
      } catch (err) {
        console.error(err)
      }
    },
    async getSubApproving () {
      try {
        const res = await listSubApprovingLists()

        this.subApprovingList = res.data
      } catch (err) {
        console.error(err)
      }
    }
  

  },
  mounted () {
    this.commonStat()
    this.getShopOrderSending()
    this.getSubApproving()

    /* 初始化 */
    this.initAllCharts()

    /* 数据获取 */
    this.historyMonth()

    window.addEventListener('resize', () => {
      this.allChartsResize()
    })
  }
}
</script>


<style lang="less" scoped>
  .home {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    

    .row-1 {
      margin-bottom: 16px;
      .panel {
        background-color: #FFF;

        min-height: 140px;
        padding: 12px;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
        column-gap: 12px;
        .box-1 {
          border: 1px solid #ccc;
          box-sizing: border-box;
          padding: 8px 16px;

          display: flex;
          // justify-content: center;
          align-items: center;

          & > div {
            width: 100%;
            // max-width: 190px;
            display: flex;
            justify-content: space-around;
            .left {
              .iconfont {
                font-size: 56px;
                color: rgba(0, 0, 0, .6);
              }
            }
            .right {
              display: flex;
              flex-flow: column wrap;
              .label {
                color: rgba(0, 0, 0, .8);
                font-size: 12px;
                margin-bottom: 24px;
              }
              .value {
                font-size: 26px;
                white-space: nowrap;
                .unit {
                  margin-left: 8px;
                  font-size: 12px;
                }
              }
            }
          }
        }
        .box-2 {
          border: 1px solid #ccc;
          border-radius: 5px;

          display: flex;

          .chart {
            width: 50%;
            height: 100%;
          }
        }
        
      }
    }

    .row-2 {
      margin-bottom: 16px;

      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 16px;
      .panel {
        background-color: #FFF;
        padding: 24px;
      }
      .inspection-agency {
        .content {
          margin-top: 24px;
          position: relative;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-items: center;
          .box {
            box-sizing: border-box;
            min-height: 120px;
            width: 100%;
            padding: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            & > div {
              display: flex;
              .left {
                margin-right: 16px;
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 56px;
                  color: rgba(0, 0, 0, .6);
                }
              }
              .right {
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-between;
                .value {
                  font-size: 26px;
                  .unit {
                    margin-left: 4px;
                    font-size: 12px;
                  }
                }
                .label {
                  font-size: 12px;
                  color: rgba(0, 0, 0, .8);
                }
              }
            }

            &:not(:last-child) {
              border-right: 1px solid #CCC;
            }
          }
        }
      }

      .inspection-report {
        display: flex;
        flex-flow: column nowrap;
        .content {
          padding-top: 16px;
          flex: auto;
          display: flex;
          .chart {
            width: 33.3%;
            height: 100%;
          }
        }
      }
    }
    .row-3 {
      min-height: 100px;
      background-color: #FFF;
      margin-bottom: 16px;
      .map-wrapper {
        position: relative;
        width: 100%;
        height: 400px;
        #map {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      #map-ratio {
        width: 100%;
        height: 100px;
        margin: 24px 0;
      }
      #chart7 {
        width: 100%;
        height: 260px;
      }
    }
    .row-4 {
      margin-bottom: 16px;

      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 16px;

      .panel {
        background-color: #FFF;
        padding: 16px;
        box-sizing: border-box;
        .sub-title {
          border-bottom: 1px solid #CCC;
          padding: 0 12px 12px 12px;

          display: flex;
          justify-content: space-between;
          .more-btn {
            font-size: 12px;
            color: #3ba1ff;
            cursor: pointer;
          }
        }
        .content {
          padding: 16px 0;
          .el-table {
            width: 100%;
          }
          .marker {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #3ba1ff;
            display: inline-block;
            position: relative;
            top: -1px;
          }
        }
      }

    }

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 12px;

    }
    
  }
</style>